<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <title>Hello, world!</title>
    <style>

        #app{
            overflow-y:auto;
        }
        .my-ctl{
            margin:5px 5px 5px 0px;

        }
    </style>
</head>
<body>


<div id="app">

    <div class="input-group my-ctl">
        <div class="input-group-prepend">
            <div class="input-group-text">书名</div>
        </div>
        <input type="text" class="form-control" style="width:150px;" v-model="query.b_name">
    </div>

    <form class="form-inline">

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">作者</div>
            </div>
            <input type="text" class="form-control" style="width:150px;" v-model="query.author">
        </div>

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">出版社</div>
            </div>
            <input type="text" class="form-control" style="width:150px;" v-model="query.press">
        </div>

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">是否已经借出</div>
            </div>
            <select class="custom-select" style="width:100px;" v-model="query.status" @change="goPage(1)">
                <option value="">全部</option>
                <option v-for="(label, value) in condition" :value="value">{{label}}</option>
            </select>
        </div>

        <button type="button" class="btn btn-primary" @click="goPage(1)" >查询</button>
    </form>


    <table class="table">
        <thead>
        <tr>
            <th>封面</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>书主邮箱</th>
            <th>是否借出</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in page.list" :key="item.b_id">
            <td><img v-if="item.cover" :src="'bookcover?filename='+item.cover" style="height: 100px;width: 100px"></td>
            <td>{{item.b_name}}</td>
            <td>{{item.author}}</td>
            <td>{{item.press}}</td>
            <td>{{item.email}}</td>
            <td>{{item.status==1?'是':'否'}}</td>
            <td>
                <button type="button" class="btn btn-link"  @click="requirement(item.b_id)" >申请借阅</button>
            </td>
        </tr>
        </tbody>
    </table>

    <nav style="position:fixed; bottom: -20px">
        <ul class="pagination" style="display: flex;align-items: center">
            <li class="page-item" style="margin-right:10px;">

                <div class="input-group my-ctl">
                    <div class="input-group-prepend">
                        <div class="input-group-text">每页</div>
                    </div>
                    <select class="custom-select" style="width:70px;" v-model="query.pageSize" @change="goPage(1)">
                        <option v-for="pageSize in [2,3,5,10]" :value="pageSize">{{pageSize}}</option>
                    </select>
                    <div class="input-group-append">
                        <div class="input-group-text">条记录</div>
                    </div>
                </div>

            </li>

            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(1)" >首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.pre)">上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.next)" >下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.last)">尾页</a></li>

            <li class="page-item" style="margin-left:10px;">
                当前第 <input style="border:1px solid #EEEEEE;width:30px;text-align: center;margin:0px 3px;" type="text" v-model="query.pageNum" @blur="goPage(query.pageNum)" />页{{page.size}}条记录，共{{page.pages}}页条{{page.total}}记录。
            </li>
        </ul>
    </nav>


</div>


<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>


    const condition = {
        1: '是',
        0: '否'
    };


    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data() {
            return {
                //查询条件
                query:{
                    pageNum:1,
                    pageSize:5,
                    b_name:'',
                    author:'',
                    press:'',
                    status:''
                },
                page:{},//分页对象
                condition, //此写法 等同 eduMap ：eduMap
                BookList: [],//书籍列表数据
                borrow_info:{
                    b_id:'',
                },
            };
        },

        //定义方法
        methods: {

            //分页跳转
            goPage(pageNum,pageSize){
                if(pageNum){
                    this.query.pageNum = pageNum;
                    if(pageSize){
                        this.query.pageSize = pageSize;
                    }
                }else{
                    this.query.pageNum = 1;
                }

                this.getBookList();
            },

            //获取数据
            getBookList(){
                console.log(this.query);
                const loadIdx = layer.load(0,{success:()=>{
                        myAxios.get('/book/bookList',{params:this.query}).then((response) => {
                            layer.close(loadIdx);
                            this.page = response.data.data;
                            this.query.pageNum = this.page.current;//用服务端数据校正客户端数据参数
                            this.query.pageSize = this.page.pageSize;//用服务端数据校正客户端数据参数

                            console.log(this.page);
                        });
                }});

            },

            requirement(b_id){
                this.borrow_info.b_id = b_id
                const idx = layer.load();
                myAxios.post('/book/addborrow_info',this.borrow_info).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        this.goPage(this.page.current);
                        layer.close(this.addIdx);
                        layer.msg('已申请借阅！',{icon:1});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('申请失败！',{icon:2});
                });
            },
        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted() {
            this.goPage(1);
        }
    };

    Vue.createApp(app).mount('#app')

</script>


</body>
</html>